<template>
	<view>
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">选择学生</text>
			</view>
		</view>
		
		<view class="searchk">
		      
		        <image src="../../../../static/teacherimg/search.png" alt="" class="searchtu" />
		      
		      <input type="text" name="sousuo" id="search" placeholder="搜索学员姓名" />
		</view>
		<view class="quanxuan">
		      <view @click="quanxuan">
		        <span v-show="xian">全选</span>
		        <span v-show="!xian">取消</span>
		      </view>
		</view>
		
		<view class="ka">
			<view class="card" @click="open">
				确认打卡
			</view>
			<uni-popup ref="popup" type="center">
				<view class="queren">
					<view class="querendaka">
						确认打卡
					</view>
					<view class="numren">
						<view class="bendao">
							本次课到课10人，请假0人
						</view>
						<view class="weidao">
							未到0人，是否确认打卡
						</view>
					</view>
					
					<view class="kequ">
						<view class="quxiao" @click="qu">取消</view>
						<view class="queding" @click="que">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		
		<view class="class-banji" v-for="(item,index) in xueshengList" :key="index">
		      <view class="class-touxiang">
		        <img :src="item.image" alt="" />
		      </view>
		      <view class="class-name">{{ item.nickname }}</view>
		
			  <view class="fuxuank" @click="xuan(item)">
			        <image src="../../../../static/teacherimg/checked.png" alt="" v-show="item.checked" />
			        <image src="" class="kong" v-show="!item.checked"></view>
			  </view>
			   
		</view>
		
		
	</view>
		
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				xueshengList:[
					{
						image:'../../../../static/teacherimg/headimg.png',
						nickname:'小明',
						checked:false,
					},
					{
						image:'../../../../static/teacherimg/headimg.png',
						nickname:'小明',
						checked:false,
					},
				],
				 show: false,
				 checked:false,
				 xian:true,
			}
		},
		methods: {
			open(){
			         this.$refs.popup.open()
			      },
			quanxuan(){
				this.xian = !this.xian;
				if(this.xian==true){
					this.xueshengList.forEach((item) => {
					    item.checked = false;
					});
				}else{
					this.xueshengList.forEach((item) => {
					    item.checked = true;
					});
				}
			},
			
			xuan(item){
				item.checked = !item.checked
			},
			qu(){
				this.$refs.popup.close()
			},
			que(){
				this.$refs.popup.close()
			},
			
		},
		  components: {
		        uniPopup,
		        uniPopupMessage,
		        uniPopupDialog
		    },
	}
</script>

<style scoped>
	.quxiao,.queding{
		width: 60rpx;
		height: 100%;
		line-height: 50rpx;
		text-align: center;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}
	.queding{
		color: #8DCE2A;
	}
	.kequ{
		width: 350rpx;
		height: 50rpx;
		margin: auto;
		margin-top: 70rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.bendao,.weidao{
		width: 100%;
		height: auto;
		text-align: center;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}
	.numren{
		width: 100%;
		height:80rpx;
		margin-top: 68rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.querendaka{
		width: 100%;
		height: 32rpx;
		line-height: 32rpx;
		color: #333333;
		text-align: center;
		margin-top: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.queren{
		width: 600rpx;
		height: 360rpx;
		display:table;
		position: relative;
		z-index:100;
		background: url(../../../../static/teacherimg/daka_bg.png) no-repeat;
		background-size: 100% 100%;
	}
/deep/ .uni-popup__wrapper-box{
	width: 600rpx;
	
}	
/deep/ .uni-popup__success{
	height: 360rpx;
	background: none;
}
/deep/ uni-image{
	z-index: 1;
}
	
.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	
	.searchk {
	  width: 83.6vw;
	  height: 8vw;
	  margin: auto;
	  margin-top: 18.4vw;
	  background: #f5f5f5;
	  border-radius: 3.4667vw;
	  display: table;
	}
	
	.searchtu {
	  width: 4vw;
	  height: 4vw;
	  float: left;
	  margin-top: 2.2vw;
	  margin-left: 27.8667vw;
	}
	
	#search {
	  width: 20vw;
	  height: 3.2vw;
	  float: left;
	  margin-left:1.6vw;
	  margin-top:2.4vw;
	  color:#a9a9a9;
	  font-size:3.2vw;
	  font-family:PingFang SC;
	  font-weight:500;
	  border:none;
	  outline:none;
	  background:#f5f5f5;
	}
	
	.class-banji {
	  width: 83.6vw;
	  height: 14.6667vw;
	  margin: auto;
	  margin-top: 4.1333vw;
	  background: #ffffff;
	  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.16);
	  border-radius: 2.6667vw;
	  display: table;
	  margin-bottom: 5.3333vw;
	}
	.class-touxiang {
	  width: 10.6667vw;
	  height: 10.6667vw;
	  float: left;
	  margin: 2vw 3.6vw 0vw 4vw;
	  border-radius: 50%;
	  overflow: hidden;
	}
	.class-touxiang img {
	  width: 10.6667vw;
	  height: 10.6667vw;
	}
	.class-name {
	  width: auto;
	  height: 4vw;
	  float: left;
	  color: #333333;
	  font-size: 3.7333vw;
	  line-height: 4vw;
	  font-weight: 500;
	  margin-top: 5.3333vw;
	  font-family: PingFang SC;
	}
	
	.zhao {
	  width: 1.4667vw;
	  height: 2.6667vw;
	  float: right;
	  margin-top: 6vw;
	  margin-right: 5.3333vw;
	}
	.quanxuan {
	  width: 83.6vw;
	  height: 4vw;
	  margin: auto;
	  margin-top: 5.6vw;
	}
	.quanxuan view {
	  float: right;
	  width: auto;
	  height: 100%;
	  line-height: 4vw;
	  color: #8DCE2A;
	  font-size: 3.7333vw;
	  font-weight: 500;
	  font-family: PingFang SC;
	}
	.fuxuank {
	  width: 3.4667vw;
	  height: 3.4667vw;
	  border: 0.2667vw solid #333333;
	  float: right;
	  margin-top: 5.6vw;
	  border-radius: 0.8vw;
	  margin-right: 6.1333vw;
	}
	
	.fuxuank image {
	  width: 3.6vw;
	  height: 2.6667vw;
	  margin-bottom: 2vw;
	}
	
	
	.ka{
		width:100%;
		height:100rpx;
		position:fixed;
		bottom:0rpx;
		left:0rpx;
		background: #FFFFFF;
	}
	.card{
		width: 500rpx;
		height: 90rpx;
		margin:5rpx auto;
		background: linear-gradient(90deg, #D2F79A 0%, #8DCE2A 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFFFFF;
	}
</style>
